<html lang="en" style="background: #fff">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <style>
        .card {
            float: left;
            width: 25%;
            /*height: 280px;*/
            box-sizing: border-box;
        }

        @media screen and (max-width: 767px) {
            .card {
                float: left;
                width: 50%;
                box-sizing: border-box;
            }
        }

        .card > .item {
            transition: .5s all;
            cursor: pointer;
            margin: 10px;
            border: 1px solid #ccc;
            height: 160px;
            /*border-top: 6px solid #;*/
        }

        .card > .item .title {
            margin: 0;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            font-size: 16px;
            /*border-bottom: 1px dashed #ccc;*/
            transition: 1s all;
        }

        .card > .item .content {
            text-align: center;
            font-size: 26px;
        }

        .card > .item:hover {
            /*background: #333;*/
            /*color: #fff;*/
            transform: translateY(-8px);
            transition: all .25s ease-in-out;
            box-shadow: 0 25px 60px -20px rgba(155, 165, 163, .45);
        }

        .card > .item:hover .title {
            background: #333;
            color: #fff;
        }
    </style>
</head>
<body>
<div>
    <div style="margin:0 25px">
        <div class="card">
            <div class="item">
                <p class="title" style="background:#42e9e1">总用户数 | 今日注册数</p>
                <p id="totalUserInfo" class="content">0 | 0</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#eb776e">新客订单数(进行中) | 老客订单数(进行中)</p>
                <p id="orderNewOldInfo" class="content">0(0) | 0(0)</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#339999"> 总订单数 | 已驳回 | 进行中 | 已结束 </p>
                <p id="totalOrderInfo" class="content">0 | 0 | 0 | 0</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#56aad6">今日订单数 | 待审核 | 驳回 | 通过</p>
                <p id="todayOrderInfo" class="content">0 | 0 | 0 | 0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#9966FF">今日应回款金额</p>
                <p id="todayPeriodMoney" class="content">0</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#9966FF">今日应回款本息 | 担保费</p>
                <p id="todayPeriodInfo" class="content">0 | 0</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#9966FF">今日账单已回款本息 | 担保费</p>
                <p id="todayPeriodPayMoneyInfo" class="content">0 | 0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#9966FF">今日回款率(%) | 今日利润率(%)</p>
                <p id="todayRateInfo" class="content">0 | 0</p>
            </div>
        </div>


        <div class="card">
            <div class="item">
                <p class="title" style="background:#f686e5">明日应回款金额</p>
                <p id="tomPeriodMoney" class="content">0</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#f686e5">明日应回款本息 | 担保费</p>
                <p id="tomPeriodInfo" class="content">0 | 0</p>
            </div>
        </div>
        <div class="card">
            <div class="item">
                <p class="title" style="background:#f686e5">明日已回款本息 | 担保费</p>
                <p id="tomPeriodPayMoneyInfo" class="content">0 | 0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#f686e5">明日回款率(%) | 明日利润率(%)</p>
                <p id="tomRateInfo" class="content">0 | 0</p>
            </div>
        </div>


        <div class="card">
            <div class="item">
                <p class="title" style="background:#eb776e">总订单金额</p>
                <p id="totalPeriodMoney" class="content">0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#eb776e">总订单本息 | 担保费</p>
                <p id="totalPeriodPrincipalInfo" class="content">0 | 0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#eb776e">总回款本息 | 担保费</p>
                <p id="totalPeriodPayMoneyInfo" class="content">0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#eb776e">总回款率(%) | 总利润率(%)</p>
                <p id="totalRateInfo" class="content">0 | 0</p>
            </div>
        </div>


        <div class="card">
            <div class="item">
                <p class="title" style="background:#fbd364">今日逾期金额</p>
                <p id="todayMoneyOverdue" class="content">0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#fbd364">已逾期金额</p>
                <p id="totalMoneyOverdue" class="content">0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#66CC99">优惠本息</p>
                <p id="discountsMoney" class="content">0</p>
            </div>
        </div>

        <div class="card">
            <div class="item">
                <p class="title" style="background:#66CC99">优惠担保费</p>
                <p id="discountsMoneyByGuarantee" class="content">0</p>
            </div>
        </div>


        <div class="card">
            <div class="item">
                <p class="title" style="background:#56aad6">风控余额</p>
                <p id="dataBalance" class="content">0</p>
            </div>
        </div>

        <!--        <div class="card">-->
        <!--            <div class="item">-->
        <!--                <p class="title" style="background:#56aad6">资管余额</p>-->
        <!--                <p id="assetBalance" class="content">0</p>-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="card">
            <div class="item">
                <p class="title" style="background:#56aad6">通道费余额</p>
                <p id="loanBalance" class="content">0</p>
            </div>
        </div>

        <!--        <div class="card">-->
        <!--            <div class="item">-->
        <!--                <p class="title" style="background:#56aad6">融担余额</p>-->
        <!--                <p id="rdBalance" class="content">0</p>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
</div>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">
    let url = requestUrl + "/erupt-api/statistics/num";
    $.ajax({
        type: "POST",
        url: url,
        headers: {
            token: parent.getAppToken().token
        },
        data: {},
        datatype: "json",
        success: function (result) {
            if (result.code === 1) {
                dataInputHtml(result.data);
            } else {
                alert(result.msg)
            }
        }
    });

    function dataInputHtml(resData) {
        //所有遍历
        for (let key in resData) {
            let keyDat = resData[key];
            if (key === 'todayOrder') {
                key = 'todayOrderInfo'
                keyDat = resData['todayOrder'] + " | " + resData['todayWaitAuthOrder'] + " | " + resData['todayRefuseOrder'] + " | " + resData['todayIngOrder'];
            }

            if (key === 'totalUser') {
                key = 'totalUserInfo'
                keyDat = resData['totalUser'] + " | " + resData['todayUser'];
            }

            if (key === 'totalOrderByNew') {
                key = 'orderNewOldInfo'
                keyDat = resData['totalOrderByNew'] + "(" + resData['ingOrderByNew'] + ") | " + resData['totalOrderByOld'] + "(" + resData['ingOrderByOld'] + ")";
            }

            if (key === 'totalOrder') {
                key = 'totalOrderInfo'
                keyDat = resData['totalOrder'] + " | " + resData['refuseOrder'] + " | " + resData['ingOrder'] + " | " + resData['endOrder'];
            }
            if (key === 'todayPayRate') {
                key = 'todayRateInfo'
                keyDat = resData['todayPayRate'] + " | " + resData['todayProfitRate'];
            }
            if (key === 'tomPayRate') {
                key = 'tomRateInfo'
                keyDat = resData['tomPayRate'] + " | " + resData['tomProfitRate'];
            }
            if (key === 'totalPayRate') {
                key = 'totalRateInfo'
                keyDat = resData['totalPayRate'] + " | " + resData['totalProfitRate'];
            }
            if (key === 'todayPeriodPayMoney') {
                key = 'todayPeriodPayMoneyInfo'
                keyDat = resData['todayPeriodPayMoney'] + " | " + resData['todayPeriodPayMoneyByGuarantee'];
            }

            if (key === 'todayPeriodPrincipal') {
                key = 'todayPeriodInfo'
                keyDat = resData['todayPeriodPrincipal'] + " | " + resData['todayPeriodGuarantee'];
            }

            if (key === 'tomPeriodPayMoney') {
                key = 'tomPeriodPayMoneyInfo'
                keyDat = resData['tomPeriodPayMoney'] + " | " + resData['tomPeriodPayMoneyByGuarantee'];
            }

            if (key === 'tomPeriodGuarantee') {
                key = 'tomPeriodInfo'
                keyDat = resData['tomPeriodPrincipal'] + " | " + resData['tomPeriodGuarantee'];
            }

            if (key === 'totalPeriodPrincipal') {
                key = 'totalPeriodPrincipalInfo'
                keyDat = resData['totalPeriodPrincipal'] + " | " + resData['totalPeriodGuarantee'];
            }

            if (key === 'totalPeriodPayMoney') {
                key = 'totalPeriodPayMoneyInfo'
                keyDat = resData['totalPeriodPayMoney'] + " | " + resData['totalPeriodPayMoneyByGuarantee'];
            }


            inputById(keyDat, key)
        }
    }

    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data
            if (idName == 'todayOrder') {
                document.getElementById(idName).innerHTML = data
            }
        }
    }

</script>

</body>
</html>